import React from 'react'
import { useState } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'
type Props = {}

export default function Home({ }: Props) {
    const [booklist, setbooklist] = useState([{
        id: 1,
        name: '红楼梦'
    },
    {
        id: 2,
        name: '三国演义'
    }, {
        id: 3,
        name: '水浒传'
    }, {
        id: 4,
        name: '西游记'
    }])

    const navigate = useNavigate()
    return (
        <div>
            <p>Home页面</p>
            <ul>
                {
                    booklist.map(item =>
                        // 使用声明式导航传参
                        // 查询字符串方式
                        // <li key={item.id}><NavLink to={'/detail?id=' + item.id}>{item.id}--{item.name}</NavLink></li>
                        // 动态路由传参(restful风格方式)
                        // <li key={item.id}><NavLink to={'/detail/' + item.id}>{item.id}--{item.name}</NavLink></li>
                        // 对象方式, 其中隐式传参和之前有区别,写在对象外了
                        // <li key={item.id}><NavLink to={{ pathname: '/detail', search: `id=${item.id}` }} state={{ id: item.id }}>{item.id}--{item.name}</NavLink></li>

                        // 编程式导航传参
                        // 查询字符串方式和 动态路由方式同上
                        // <li key={item.id} onClick={() => {
                        //     navigate('/detail')
                        // }}>{item.id}--{item.name}</li>
                        // 隐式传参方式有区别;
                        <li key={item.id} onClick={() => {
                            navigate('/detail', {
                                state: {
                                    id: item.id
                                }
                            })
                        }}>{item.id}--{item.name}</li>

                    )
                }
            </ul>
        </div>
    )
}